<!--* Created by caiqi on 16/12/19.-->
<template>
  <div class="docu">
    <el-menu
      :default-active="select_trademar"
      class="el-menu-demo"
      mode="horizontal"
      @select="muneSelect"
      active-text-color="#2b303b"
    >
      <el-menu-item v-for="(item) in trademarkList" :key="item._id" :index="item._id">{{item.name}}</el-menu-item>
    </el-menu>
    <el-button class="Uwant" size="mini" @click="dialogVisible=true">你想知道什么？</el-button>
    <div class="doc-list">
      <el-row :gutter="24">
        <el-col :span="6" v-for="(item) in docList" :key="item._id" class="item">
          <div :style="{'background-image':`url(${item.surface})`}" class="image">
            <div class="_body" @click="toDetail(item._id)">
              <div class="hover_show">
                <div>更新于：{{ item.updata_date | endDate}}</div>
              </div>
              <div class="new" v-if="item.isNew">NEW</div>
              <h3 class="title">{{item.title}}</h3>
              <div class="readSize">
                <span>
                  <i class="el-icon-view"></i>
                  {{item.readSize||0}}
                  <i class="el-icon-star-on"></i>
                  {{item.likeSize||0}}
                </span>
                <span class="time">{{ item.created_date | endDate}}</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-dialog title="你想知道什么？" :visible.sync="dialogVisible" width="30%">
      <el-input
        type="textarea"
        :rows="2"
        placeholder="你想知道什么？"
        v-model="wantKnowValue"
        :autosize="{ minRows: 4, maxRows: 10}"
      ></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="wantKnow">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import api from "@/api/index";
import tools from "@/server/storage.server";

export default {
  components: {},
  data() {
    return {
      pages: 1,
      select_trademar: tools.get("home_tra") || "0",
      trademarkList: [],
      docList: [],
      dialogVisible: false,
      wantKnowValue: ""
    };
  },
  methods: {
    // ========================================  获取文章列表
    async getDocList() {
      const updata = {
        terrace: 1,
        trademark: this.select_trademar,
        pages: this.pages,
        numbers: 30
      };
      const { data } = await api.getDocList(updata);
      this.docList = data.list;
    },
    // ========================================  获取类目列表
    async GetList() {
      const { data } = await api.getTrademarkList();
      this.trademarkList = data;
      if (this.select_trademar == 0) {
        this.select_trademar = data[0]._id;
      }
      this.getDocList();
    },

    async wantKnow() {
      const upData = {
        say: this.wantKnowValue
      };
      const { code } = await api.adminWantSay(upData);
      if (code === 0) {
        this.dialogVisible = false;
      }
    },
    muneSelect(index) {
      if (!index) {
        return;
      }
      this.select_trademar = index;
      tools.set("home_tra", index);
      this.getDocList();
    },
    toDetail(id) {
      this.$router.push({
        name: "docDetail",
        params: {
          id
        }
      });
    }
  },
  computed: {},
  mounted: function() {
    this.GetList();
    // this.getTradList();
  }
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.doc-list {
  padding: 0 20px;
  padding-bottom: 60px;
  .item {
    margin-bottom: 15px;
    ._body {
      position: relative;
      height: 100%;
      color: #fff;
      background-color: rgba(0, 0, 0, 0.3);
      &:hover {
        cursor: pointer;
        .hover_show {
          display: block;
        }
      }
    }
    .new {
      position: absolute;
      right: 0;
      top: 0;
      font-size: 12px;
      padding: 2px 7px;
      border-bottom-left-radius: 5px;
      background-color: rgb(6, 143, 86);
    }
    .title {
      padding: 16px;
    }
    .image {
      position: relative;
      width: 100%;
      height: 25vh;
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
    }
    .hover_show {
      display: none;
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 1;
      background-color: rgba(0, 0, 0, 0.6);
      > div {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        text-align: center;
        font-size: 16px;
      }
    }
    .readSize {
      position: absolute;
      bottom: 10px;
      width: 90%;
      padding: 0 5%;
      line-height: 35px;
      font-size: 14px;
    }

    .time {
      float: right;
    }
  }
}

.input-with-select {
  width: 25vw;
}

.pagination {
  margin-top: 10px;
  input {
    height: 30px !important;
  }
}

.docu {
  padding-top: 30px;
  .el-menu-demo {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 9;
    background-color: #fff;
    box-shadow: 4px 0px 17px 0px #000000;
  }
  .el-menu {
    height: auto;
  }

  .Uwant {
    margin: 35px 20px;
    margin-bottom: 0;
  }
}

.bread {
  font-size: 1.5rem;
}
</style>